<script>
  export default {
    name: 'calendar-slide',

    props: {
      year: {
        type: Number,
      },

      month: {
        type: Number,
      },

      index: {
        type: Number,
      },

      dateList: {
        type: Array,
        default() {
          return []
        }
      },

      dateUserSelect: {
        type: String
      }
    },

    computed: {
      currentMonthDateList() {
        return this.dateList.filter(({date}) => {
          return date.includes(`${this.year}-${this.addZero(this.month)}`)
        })
      },

      thisMonth() {
        return this.monthInfo(this.year, this.month)
      },

      lastMonth() {
        let year = this.year;
        let month = this.month - 1;

        if (month === 0) {
          --year;
          month = 12
        }

        return this.monthInfo(year, month)
      },
    },

    methods: {
      /**
       * 月份信息
       * @param year
       * @param month
       * @returns {{year: *, month: *, daysSum: number, lastDay: number}}
       */
      monthInfo(year, month) {
        const theLastDay = new Date(year, month, 0);

        return {
          year,
          month,
          daysSum: theLastDay.getDate(),

          // 最后一天是周几
          lastDay: theLastDay.getDay() || 7
        }
      },

      daysOptions(year, month, date) {
        if (month > 12) {
          month = 1;
          ++year
        }
        month = this.addZero(month);
        date = this.addZero(date);

        const dateString = `${year}-${month}-${date}`;
        let success, _position;
        const active = this.currentMonthDateList.some(({date: _date, tick, position}) => {
          if (_date === dateString) {
            success = tick;
            _position = position;
            return true
          }
        });

        return {
          position: active ? _position : 'undefined',
          className: {
            'calendar-days-active': active,
            'calendar-days-success': success,
            'calendar-days-warn': !success && _position < 0,
            'calendar-days-selected': dateString === this.dateUserSelect,
            'calendar-days-is-coming': _position > 0
          }
        }
      },

      handleClick(e) {
        const date = e.target.getAttribute('data-date');
        const position = Number(e.target.getAttribute('data-position'));

        if (!!date) {
          this.$emit('click', {
            date,
            valid: !isNaN(position),
            position
          });
        }
      },

      addZero(num) {
        return String(num < 10 ? '0' + num : num)
      }
    },

    render(h) {
      const lastMonthDaysList = [];
      const monthDaysList = [];
      const nextMonthDaysList = [];
      const {lastMonth, thisMonth} = this;

      if (lastMonth.lastDay !== 7) {
        for (let i = lastMonth.lastDay - 1; i >= 0; i--) {
          lastMonthDaysList.push(
            <li class="calendar-grid">
              <span
                class={{
                  'calendar-days': true,
                  'calendar-days-otherMonth': true,
                  ...this.daysOptions(lastMonth.year, lastMonth.month, lastMonth.daysSum - i).className
                }}
              >
                {lastMonth.daysSum - i}
              </span>
            </li>
          );
        }
      }

      for (let i = 1; i <= thisMonth.daysSum; i++) {
        const {position, className} = this.daysOptions(thisMonth.year, thisMonth.month, i);

        monthDaysList.push(
          <li class="calendar-grid">
            <span
              class={{
                'calendar-days': true,
                ...className
              }}
              data-position={position}
              data-date={`${thisMonth.year}-${this.addZero(thisMonth.month)}-${this.addZero(i)}`}
            >
              {i}
            </span>
          </li>
        )
      }

      for(let i = 1; i <= 7 - thisMonth.lastDay; i++) {
        const {className} = this.daysOptions(thisMonth.year, thisMonth.month + 1, i);

        nextMonthDaysList.push(
          <li class="calendar-grid">
            <span
              class={{
                'calendar-days': true,
                'calendar-days-otherMonth': true,
                ...className
              }}
            >
              {i}
            </span>
          </li>
        )
      }
      return (
        <ul class="calendar-slide" onClick={e => this.handleClick(e)}>
          {lastMonthDaysList}
          {monthDaysList}
          {nextMonthDaysList}
        </ul>
      )
    }
  }
</script>

<style lang="less" scoped>
  .calendar-slide {
    font-size: 0;
  }

  .calendar-grid {
    display: inline-block;

    width: 14.28%;

    text-align: center;
  }
</style>
